<template>
  <v-chart :options="option" class="echarts"/>
</template>

<style scoped>
  /**
   * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
   * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
   */
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>

<script>
  // 导入绘图组件 需要安装 vue-echart echart
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/grid'
  import 'echarts/lib/component/toolbox'

  export default {
    components: {
      'v-chart': ECharts
    },
    data () {
      return {
         echartOption:null,
      }
    },

    methods: {
      setChartOpention(){
        let option = {
          title: {
            text: '折线图堆叠'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['demo']
          },
          xAxis: {
            type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }]
        }

        this.echartOption = option
      }

    }
  }
</script>
